<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card class="box-card">
    <div class="FormMessage">
      <el-form
        :label-position="labelPosition"
        label-width="150px"
        :model="UserForm"
      >
        <el-form-item label="ID">
          <el-input v-model="UserForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="个人喜欢的口味">
          <el-input v-model="UserForm.like" disabled></el-input>
        </el-form-item>
        <el-form-item label="常去的食堂">
          <el-input v-model="UserForm.often" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="UserForm.phone" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>
        
  <script>
export default {
  created() {},
  data() {
    return {
      labelPosition: "right",
      UserForm: {
        name: "蓝色妖姬",
        like: "甜的，辣的",
        often: "书宜烧仙草，外婆食堂",
        phone: "134xxxxx90",
      },
    };
  },
  methods: {},
};
</script>
  
  <style scoped>
.FormMessage {
  text-align: center;
  width: 40%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>
        